<template>
  <div class="remote-page">
    <div class="remote-page__tip">
      重要提醒: 被控过程中, 你的屏幕所有内容将被对方全程观看/操作。 提供本机识别码前, 请确认信任对方。 若你提供本机识别码和验证码, 则对方无需本机确认即可远程控制, 请谨慎提供验证码!
    </div>
    <div class="remote-page__main">
      <div class="remote-page__main__left">
        <div class="remote-page__main__left__title">允许控制本机</div>
        <div class="remote-page__main__left__body">
          <div class="form-item identifier-code">
            <div class="form-item__label identifier-code__label">本机识别码</div>
            <div class="form-item__value identifier-code__value">
              <template v-if="!store.getters.connected || identifier_code__local.length === 0">
                <span v-for="n in 9" class="lost-connect-symbol"></span>
              </template>
              <template v-else>
                {{identifier_code__local__format}}
                <svg-icon
                  icon-class="copy"
                  class-name="copy-icon"
                  title="复制识别码"
                  @click="handleCopy"
                />
              </template>
            </div>
          </div>
          <div class="form-item captcha">
            <div class="form-item__label captcha__label">本机验证码</div>
            <div class="form-item__value captcha__value">
              <template v-if="!store.getters.connected">
                <span v-for="n in 4" class="lost-connect-symbol"></span>
              </template>
              <template v-else>
                <template v-if="captcha_visible">
                  <template v-if="!captcha_editable">
                    <span @contextmenu="handleMenu" style='user-select: auto;'>{{captcha__local}}</span>
                    <svg-icon icon-class="edit" class-name="edit-icon" title="自定义验证码" @click="captcha_editable=true"/>
                    <svg-icon icon-class="eye" class-name="eye-icon" title="隐藏验证码" @click="captcha_visible=!captcha_visible"/>
                  </template>
                  <template v-else>
                    <input type="text"
                           v-model="captcha__local__format"
                           autofocus @blur="captcha_editable=false"
                           ref="captcha_input_ref__local"
                           oninput="if(value.length > 8)value = value.slice(0, 8)"
                    >
                  </template>
                </template>
                <template v-else>
                  <span class="captcha__value__dot" v-for="n in captcha__local.length"></span>
                  <svg-icon icon-class="eye2" class-name="eye2-icon" title="显示验证码" @click="captcha_visible=!captcha_visible;captcha_editable=false;"/>
                </template>
              </template>
            </div>
            <div class="form-item__label">
              每次被控后将自动更新验证码
            </div>
          </div>
        </div>
      </div>

      <div class="remote-page__main__vertical-line"></div>

      <div class="remote-page__main__right">
        <div class="remote-page__main__right__title">控制远程设备</div>
        <div class="remote-page__main__right__body">
          <div class="form-item">
            <div class="form-item__label">伙伴识别码</div>
            <div class="form-item__value">
              <input
                type="text"
                v-model="identifier_code__remote__format"
                @input="onIdentifierInput"
                placeholder="输入识别码,远程伙伴"
                @keyup.enter="handleRemoteAssist"
              >
            </div>
          </div>
          <div class="form-item">
            <div class="form-item__label">验证码</div>
            <div class="form-item__value">
              <input
                type="text"
                v-model="captcha__remote"
                placeholder="选填"
                @keyup.enter="handleRemoteAssist"
              >
            </div>
          </div>
          <button
            :class="{
              'assist-button':true,
              'active': identifier_code__remote
            }"
            @click="handleRemoteAssist"
          >远程协助</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref, computed, watch, onMounted} from 'vue';
import {useStore} from "vuex";
import {log} from '../../../../../../utils/log';
import {formatIdentifierCode} from '../../../../../../utils/string-util';

export default defineComponent({
  name: "remote",
  setup(){
    const store = useStore();
    const identifier_code__local = ref(store.state.app.identifier_code);
    const captcha__local = ref('3C26a3');
    const identifier_code__remote = ref('');
    const captcha__remote = ref('');
    const captcha_visible = ref(true);
    const captcha_editable = ref(false);
    const captcha_input_ref__local = ref(null);

    onMounted(() => {
      window.electron.onLogined((code) => {
        store.dispatch('app/setIdentifierCode',identifier_code__local.value = code + '');
      });
    });

    //  输入伙伴识别码时 每3个字符 就会有一个空格隔开
    const identifier_code__remote__format = computed({
      get(){
        // log('identifier_code__remote__format get --- --- ---');
        // log('identifier_code__remote.value:',identifier_code__remote.value);
        const x = formatIdentifierCode(identifier_code__remote.value)
        // log('formatIdentifierCode:',x);
        return x;
      },
      set(newVal){
        // log('identifier_code__remote__format set --- --- --- newVal:',newVal);
        const x = newVal.replace(/[^\d\s]/g,'')
        // log('set value:',x);
        identifier_code__remote.value = x;
      }
    })
    //↑ 上面v-model的触发完了(get、set) 才会触发input的oninput事件
    const onIdentifierInput = (ev)=>{
      const el = ev.target;
      // log('oninput');
      el.value = el.value.replace(/[^\d\s]/g,'');
      log(el.value);
      // log('el.value.length:',el.value.length)
    }

    const identifier_code__local__format = computed({
      get() {
        return formatIdentifierCode(identifier_code__local.value);
      },
      set(newVal) {
        identifier_code__local.value = newVal.replace(/[^\d\s]/g,'');
      }
    });

    //todo 考虑封装一下这种v-model oninput的情况
    const captcha__local__format = computed({
      get() {
        return captcha__local.value;
      },
      set(newVal) {
        captcha__local.value = newVal.slice(0, 8);
      }
    });
    //用以查看 captcha__local.value 是否正确设置 (不能超过8位)
    /*watch(
      () => captcha__local.value
      , (v) => {
        log('captcha__local.value:',captcha__local.value);
      });*/
    // 点击编辑captcha时 自动获取焦点
    watch(
      () => captcha_input_ref__local.value //不要监控captcha_editable.value, 因为它变得时候ref还没有拿到
      , (currentValue) => {
        if (captcha_editable.value === true) {
          captcha_input_ref__local.value.focus();
        }
      });


    //
    const handleRemoteAssist = () => {
      //todo 发起请求 等待对方同意后 再正式进行p2p连接
      window.electron.controlRemote({
        target_identifier_code: identifier_code__remote.value.replace(/\s/g, ''),
        captcha: captcha__remote.value
      });
    };
    const handleCopy = () => {
      log('--- --- --- handleCopy --- --- ---')
      log('identifier_code__local.value:',identifier_code__local.value)
      //https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
      navigator.clipboard.writeText(identifier_code__local.value);
      //electron里也有专门的api
    };

    const handleMenu = (e)=>{
      e.preventDefault();
      window.electron.onContextMenu()
    }

    return {
      captcha__local,
      identifier_code__local,
      captcha__remote,
      identifier_code__remote,
      identifier_code__remote__format,
      onIdentifierInput,
      identifier_code__local__format,
      captcha_visible,
      captcha_editable,
      captcha_input_ref__local,
      captcha__local__format,
      store,
      handleRemoteAssist,
      handleCopy,
      handleMenu
    }
  }
});
</script>

<style lang="scss">
  .remote-page{
    padding: 17px 20px 0;
    &__tip {
      background: rgb(64, 42, 35);
      color: rgb(175, 166, 163);

      height: 56px;
      line-height: 16px;
      border: 1px solid rgb(83, 52, 43);
      border-radius: 5px;
      padding: 13px 11px;

      font-size: 12px;
    }

    &__main {
      margin-top: 46px;
      display: flex;
      &__left__title, &__right__title{
        font-size: 16px;
        color: rgb(196, 196, 196);
        margin-bottom: 42px;
      }
      &__left {
        width: 280px;
        flex-shrink: 0;
        &__body {
          .identifier-code {
            &__value {
              font-size: 28px;
              line-height: 68px;
              > * {
                vertical-align: middle;
              }
              .lost-connect-symbol {
                display: inline-block;
                background: #ffffff;
                width: 8px;
                height: 2px;
                margin-right: 4px;

                &:nth-of-type(3n){
                  margin-right: 13px;
                }
              }
              .copy-icon {
                font-size: 16px;
              }
            }
          }
          .captcha {
            &__value {
              line-height: 52px;
              > * {
                vertical-align: middle;
              }
              .lost-connect-symbol{
                display: inline-block;
                background: #ffffff;
                width: 6px;
                height: 1px;
                margin-right: 1px;
              }
              &__dot {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 4px;
                background: #ffffff;
                margin-right: 8px;
              }
              svg {
                font-size: 14px;
              }
              input {
                outline: none;
                background: rgb(41, 41, 41);
                border: none;
                color: #ffffff;
                font-size: 16px;
                height: 21px;
                line-height: 21px;
              }
            }
          }
        }
      }

      &__vertical-line {
        height: 260px;
        width: 1px;
        background: rgb(41, 41, 41);
      }

      &__right {
        flex-grow: 1;
        padding-left: 20px;
        .form-item {
          &__value {
            padding: 10px 0 14px;

            input {
              display: block;
              width: 100%;
              outline: none;
              background: transparent;

              height: 40px;
              border: 1px solid rgb(84, 84, 84);
              border-radius: 4px;
              padding-left: 12px;

              line-height: 38px;
              font-size: 16px;
              color: rgb(224,224,224);

              &::placeholder {
                font-size: 14px;
                color: rgb(61, 61, 61);
              }

              &:focus {
                border-color: rgb(255, 141, 107);
              }
            }
          }
        }

        .assist-button {
          display: block;
          margin: 14px auto;
          height: 32px;
          line-height: 30px;
          width: 160px;
          border-radius: 16px;
          background: rgb(35, 35, 35);
          border: 1px solid rgb(35, 35, 35);
          color: rgb(153, 153, 153);

          &.active {
            background: transparent;
            border: 1px solid #FF8D6BFF;
            color: #FF8D6BFF;
          }

          &.active:hover {
            background: #FF8D6BFF;
            color: #ffffff;
            cursor: pointer;
          }
        }
      }
    }
  }

  .form-item{
    &__label {
      color: rgb(153, 153, 153);
      font-size: 12px;
    }
    &__value {
      color: #fff;
      svg {
        color: rgb(105, 105, 105);
        margin-left: 10px;
        cursor: pointer;

        &:hover{
          color: #FF8D6BFF;
        }
      }
    }
  }
</style>
